<template>
  <div class="routes">
    <div
      v-for="route, i in routes"
      :key="i"
      class="route"
      :class="{
        selected: i === selected_route
      }"
      @click="showRoute(route, i)"
    >
      <div class="header">
        {{ t('routes.plan_no', { id: i + 1 }) }}
      </div>
      <div class="line">
        {{ t('routes.ship_name', { ship: route.ship_name }) }}
      </div>
      <div class="line">
        {{ t('routes.time', { time: route.start_time }) }}
      </div>
      <div class="line">
        {{ t('routes.start_point', { name: nodes[route.start_node_idx].name }) }}
      </div>
      <div class="line">
        {{ t('routes.end_point', { name: nodes[route.end_node_idx].name }) }}
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeUnmount, ref } from 'vue';

import { useI18n } from 'vue-i18n';

import { storeToRefs } from 'pinia';
import { useGraphStore } from '@/stores/graph';

import { api, Route } from '@/api';


const emits = defineEmits<{
	clearPoints: [],
	showPoints: [start: number[], end: number[]]
}>();

const { t } = useI18n();

const { nodes } = storeToRefs(useGraphStore());

const routes = ref<Route[]>([]);
const selected_route = ref<number | null>(null);


function showRoute(route: Route, index: number) {
	selected_route.value = index;

	emits('showPoints',
		[
			nodes.value[route.start_node_idx].lon,
			nodes.value[route.start_node_idx].lat
		],
		[
			nodes.value[route.end_node_idx].lon,
			nodes.value[route.end_node_idx].lat
		]
	);
}


api.getRoutes().then(response => {
	routes.value = response.routes;
});

onBeforeUnmount(() => {
	emits('clearPoints');
});
</script>

<style lang="scss" scoped>
.routes {
	max-height: 100%;
	display: flex;
	flex-direction: column;
	overflow: auto;
	// gap: 8px;

	.route {
		display: flex;
		flex-direction: column;
		padding-bottom: 8px;
		border-bottom: 1px solid black;
		cursor: pointer;

		&.selected {
			background-color: #eeeeee;
		}
	}
}
</style>